/*
 * coupon list
**/
<template>
<div>
<v-tab></v-tab>
<div class="weui-cells mod-items">
  <div class="filter-box">
  	<ul class="f-item clear">
  		<li v-for="item in couponTypeList" @click="tab(item.cid)">
  			<i class="icon" :style="{backgroundImage: 'url('+item.thumb+')'}"></i>
  			<span class="f-name">{{item.title}}</span>
  		</li>
  	</ul>
  </div>
  <div class="weui-loadmore weui-line" >
      <span class="weui-loadmore__tips">猜你喜欢</span>
  </div>
  <div class="game-pd" v-load-more="getCouponList" :class="{'hide':childshow}">
	  <div class="game-box">
	    <div class="weui-cell" v-for="item in couponList">
	      <div class="weui-cell__hd def-icon">
	        <img :src="item.icon" alt="" class="logo"/>
	      </div>
	      <div class="weui-cell__bd">
	        <p class="cell__bd-tit ellipsis">{{item.title}}</p>
	        <p class="cell__bd-dsc" v-if="item.type === 6">有效期至：{{item.deadline}}</p>
	        <p class="cell__bd-dsc" v-if="item.type !== 7">{{item.desc}}</p>
	        <p class="cell__bd-dsc" v-if="item.type === 7">券后价<span class="price1">￥{{item.sale_price}}</span><span class="price2">原价￥{{item.original_price}}</span></p>
	      </div>
	      <div class="weui-cell__ft reset-ft">
	        <a class="btn" @click="turnCoupon(item.tid, item.link)" v-if="item.type === 1">查看详情</a>
	        <a class="btn" @click="photoshow(item.tid, item.coupon_img)" v-if="item.type === 6">查看详情</a>
	        <a class="btn copy" @click="tokenshow(item.tid, item.secret_key)" v-if="item.type === 7">查看详情</a>
	      </div>
	    </div>
	  </div>
  </div>
  <div class="weui-loadmore" v-if="showLoading">
    <i class="weui-loading"></i>
    <span class="weui-loadmore__tips">正在加载</span>
  </div>
  <div class="weui-loadmore weui-loadmore_line" v-if="touchend">
      <span class="weui-loadmore__tips">期待上新</span>
  </div>
</div>
<modal-dialog ref="dialog"></modal-dialog>
<div v-if="inGetData">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast" style="margin-top:3.8em; background:rgba(17, 17, 17, 0.5)">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">数据加载中</p>
    </div>
</div>
<div class="mod-footer-place"></div>
<coupon ref="coupon" :pid="cid"></coupon>
</div>
</template>
<script>
import {getCouponTypeList, getCouponList, setCouponRecord} from 'src/service/getData'
import {loadMore} from 'src/config/mixin'
import modalDialog from 'src/components/dialog'
import coupon from 'src/page/coupon/coupon'
import vTab from 'components/common/tab'
import Clipboard from 'clipboard'
export default {
  data () {
    return {
      inGetData: false,
      currentPage: 1,
      couponTypeList: [],
      couponList: [],
      pid: 1,
      pageSize: 10, // 每页显示数据条数
      touchend: false, // 没有更多数据
      showLoading: true, // 显示加载动画
      preventRepeatReuqest: false, // 到达底部加载数据，防止重复加载
      cid: 1, // 子组件使用
      childshow: false // 子组显示
    }
  },
  components: {
    'v-tab': vTab,
    coupon,
    modalDialog
  },
  mixins: [loadMore],
  mounted () {
    this.initData()
  },
  methods: {
    initData () {
      this.getCouponTypeList()
      this.getCouponList()
    },
    async getCouponTypeList () {
      this.inGetData = true
      let tmpData = await getCouponTypeList(0)
      if (tmpData.code !== 0) return
      this.couponTypeList = tmpData.data.list
    },
    async getCouponList () {
      // 最后一页不再加载
      if (this.touchend) {
        return
      }
      // 防止重复请求
      if (this.preventRepeatReuqest) {
        return
      }
      this.showLoading = true
      this.preventRepeatReuqest = true
      let tmpData = await getCouponList(this.currentPage++, this.pid, this.pageSize, 1)
      this.inGetData = false
      this.showLoading = false

      if (tmpData.code !== 0) return

      let dataList = tmpData.data.list
      this.couponList = [...this.couponList, ...dataList]
      // 最后一页
      if (dataList.length < this.pageSize) {
        this.touchend = true
      }
      this.preventRepeatReuqest = false
    },
    tab (cid) {
      this.$refs.coupon.show = true
      this.$refs.coupon.initData(cid, this.closeChild)
      this.childshow = true
    },
    closeChild () {
      this.childshow = false
    },
    turnCoupon (_tid, _link) {
      setCouponRecord(_tid)
      window.location.href = _link
    },
    photoshow (_tid, _src) {
      setCouponRecord(_tid)
      this.$refs.dialog.confirm('<img width="100%" src="' + _src + '"/>', {
        type: 'alert'
      })
    },
    tokenshow (_tid, _token) {
      let _this = this
      setCouponRecord(_tid)
      let clipboard = new Clipboard('.copy', {
        text () {
          return _token
        }
      })
      clipboard.on('success', function (e) {
        _this.$refs.dialog.confirm('<h3>淘口令：' + _token + ' 已复制，打开【手机淘宝】即可领券并下单！</h3>', {
          type: 'tips',
          okText: '好的'
        })
        clipboard.destroy()
      })
      clipboard.on('error', function (e) {
        _this.$refs.dialog.confirm('<h3 style="-webkit-user-select:auto;color:#ffa200;">' + _token + '</h3><h3>长按复制上方淘口令后，打开【手机淘宝】即可领券并下单！</h3>', {
          type: 'tips',
          okText: '好的'
        })
        clipboard.destroy()
      })
    }
  }
}
</script>
<style scoped>
	.weui-cells.mod-items{margin:0rem !important;background:#efeff4;}
	.weui-loadmore__tips{background: #efeff4;}
	.filter-box{background: #fff;}
	.f-item{padding: 0.12rem 0;}
	.f-item li{float: left; width: 0.92rem; text-align: center; padding: 0.07rem 0; position: relative;}
	.f-item .icon{width: 0.44rem; height: 0.44rem; display: inline-block;background-repeat:no-repeat; background-size:100% auto;}
	.f-item .f-name{display: block; text-align: center; font-size: 0.1rem;}
	.game-pd{padding: 0 0.1rem; border-top: 1px solid #efeff4;}
	.game-pd.hide{height:50px;}
	.game-box .weui-cell{margin-top: 0.1rem;background:#fff;padding:0;-webkit-align-items:inherit;align-items:inherit;}
	.game-box .def-icon{width: 0.875rem; height: 0.875rem; overflow: hidden;margin-right: 0.08rem;}
	.game-box .logo{width: 100%;}
	.game-box .cell__bd-tit{font-size: 0.15rem; color: #333; line-height: 0.37rem; font-weight: 300;width: 2.3rem !important;}
	.game-box .cell__bd-dsc{color: #f2a63b; font-size: 0.11rem;}
	.mod-items .weui-cell .weui-cell__hd img { border-radius: .05rem; }
	.game-box .weui-cell .weui-cell__ft{width: 0rem;}
	.game-box .btn{width: 0.86rem; line-height: 0.23rem; background: #ffa200; color: #fff; font-size: 0.11rem;border-radius: 22px; text-align: center;position: absolute;top: 0.5rem;right: 0.09rem;}
	.price1{color: #ff0000; font-size: 0.16rem;}
	.price2{text-decoration: line-through; display: block; line-height: normal;color: #999;}
	.weui-cell:before{left:0 !important;right:0 !important;}
</style>
